<script setup lang="ts">
import { ref } from 'vue';
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		}
	})
	const emits = defineEmits(['change'])
	const handleCloseMask = () => {
		emits('change', false)
	}
</script>
<template>
	<view class="mask" @click="handleCloseMask" :class="{'show': show}" v-if="show"></view>
	<view class="drawer" :class="{'left': show}">
		<slot name="drawer"></slot>
	</view>
</template>
<style scoped lang="scss">
	.mask {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #00000069;
		z-index: 30;
	}
	.mask.show {
	}
	.drawer {
		width: 61.8vw;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: white;
		position: absolute;
		transform: translateX(-100%);
		transition: transform ease 0.3s;
		z-index: 30;
	}
	.drawer.left {
		transform: translateX(0);
	}
</style>